<template>
  <router-view v-if="hideTab"></router-view>
  <div id="app" v-else>
    <el-container style="height:100%;">
      <el-header style="padding: 0; height: 50px;">
        <top-header></top-header>
      </el-header>
      <el-container style="height: calc(100% - 50px);">
        <el-aside width="110px" style="background:#298bf5;" class="hidden-xs-only">
          <side-bar></side-bar>
        </el-aside>
        <div class="app-wrap">
          <!-- 此处放置el-tabs代码 -->
          <el-tabs
            v-if="allTabs.length > 0"
            v-model="activeTab"
            type="border-card"
            closable
            @tab-click='tabClick'
            @tab-remove='tabRemove'
          >
            <el-tab-pane
              :key="item.name"
              v-for="(item, index) in allTabs"
              :label="item.extra"
              :name="item.path"
            >

            </el-tab-pane>
          </el-tabs>
          <div class="cont-container">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css'
  import './styles/main.css'
  import Sidebar from '@/components/common/Sidebar.vue'
  import Header from '@/components/common/Header.vue'

  const MAP_PATH = '/map';

  export default {
    name: 'App',
    components: {
      'side-bar': Sidebar,
      'top-header': Header
    },
    data() {
      return {
        allTabs: [],
        activeTab: MAP_PATH,
        routePath: '/',
        hideTab: true
      }
    },
    created() {
      this.routePath = this.$route.path
      this.addTab(MAP_PATH)

      this.$router.beforeEach((to, from, next) => {
        if (to.path === '/map') {
          if (from.path === '/supervise' || from.path === '/produce' || from.path === '/ensure') {
            this.tabRemove(from.path, false)
          }
        } else if (to.path === '/supervise' || to.path === '/produce' || to.path === '/ensure') {
          if (from.path === '/supervise' || from.path === '/produce' || from.path === '/ensure') {
            this.tabRemove(from.path, false)
          }
        }

        next()
      })
    },
    mounted() {
      // this.addTab('/map')
      if (this.$route.path !== MAP_PATH) {
        this.addTab(this.$route.path)
      }
    },
    methods: {
      addTab(path) {
        let route = this.$router.options.routes.find(r => r.path === path)
        if (route && route.path !== '/' && route.path !== '/login') {
          // let tabExist = !!this.allTabs.find(t => t.path === route.path)
          let tabExist = !!this.allTabs.find(t => route.path.startsWith(t.path))
          if (!tabExist) {
            this.allTabs.push(route)
          }
          this.activeTab = path
        }
      },
      tabClick(tab) {
        this.$router.push({path: this.activeTab});
      },
      //移除tab标签
      tabRemove(tabName, pushView = true) {
        // 海图不删
        if (tabName === '/map') {
          return
        }

        let tabIndex = 0;
        for (let i = 0; i < this.allTabs.length; i++) {
          if (this.allTabs[i].path === tabName) {
            this.allTabs.splice(i, 1)
            tabIndex = i
            break
          }
        }

        if (this.activeTab === tabName && pushView) {
          if (tabIndex >= this.allTabs.length) {
            tabIndex = this.allTabs.length - 1
          }
          this.currentTab = this.allTabs[tabIndex]
          this.$router.push({path: this.allTabs[tabIndex].path})
        }
      }
    },
    watch: {
      '$route'(toRoute, fromRoute) {
        this.addTab(toRoute.path)
        this.routePath = this.$route.path
        this.hideTab = (this.routePath === '/login' || this.routePath === '/forgot-pwd' || this.routePath === 'change-pwd')
      }
    }
  }
</script>

<style>
  /*@import "./styles/main.css";*/
  @import "./styles/color-dark.css";

</style>

<style lang="scss">
  .app-wrap {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: calc(100% - 110px);
    .el-tabs__content {
      flex: 1;
    }
  }

  .cont-container {
    flex: 1;
    display: flex;
    overflow-y: auto;
  }
  .el-loading-mask {
    z-index: 9999!important;
  }

  a {
    cursor:pointer;
  }
</style>
